<template>
  <div>
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getShopList">
            <el-button slot="append" icon="el-icon-search" @click="getShopList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>

      <el-table style="margin-top: 25px;" :data="shopList" border stripe>
        <!--        索引列-->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名" prop="title"></el-table-column>
        <el-table-column label="商品图片" prop="imageList" width="300">
          <template slot-scope="scope">
            <div style="display: flex">
              <div style="margin-right: 15px" v-for="(item,index) in scope.row.imageList" :key="index">
                <el-image
                  style="width: 80px; height: 80px;border: 1px dashed #d9d9d9;border-radius: 6px;"
                  :src="item"
                  fit="cover" :preview-src-list="scope.row.imageList"></el-image>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="content" width="250">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="bottom">
              <div class="contentToo" v-html="scope.row.content"></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商品品质" prop="lity.listType"></el-table-column>
        <el-table-column label="商品原价" prop="original"></el-table-column>
        <el-table-column label="商品价格" prop="price"></el-table-column>
        <el-table-column label="商品数量" prop="shopNum"></el-table-column>
        <el-table-column label="商品购买数量" prop="shopBuy" width="120"></el-table-column>
        <el-table-column label="商品浏览数" prop="shopLook" width="100"></el-table-column>
        <el-table-column label="创建时间" prop="creatTime" width="180"></el-table-column>
        <el-table-column label="状态" prop="shopSold">
          <!-- scope.row 就是当前行的信息 作用槽 -->
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.shopSold == false">上架</el-tag>
            <el-tag type="warning" v-if="scope.row.shopSold == true">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-view" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row.id)"></el-button>
            <!--            下架-->
            <el-tooltip content="上架" v-if="scope.row.shopSold == true">
              <el-button type="warning" icon="el-icon-upload2" size="mini"
                         @click="deleteUser(scope.row.id,false)"></el-button>
            </el-tooltip>
            <el-tooltip content="下架" v-if="scope.row.shopSold == false">
              <el-button type="danger" icon="el-icon-download" size="mini"
                         @click="deleteUser(scope.row.id,true)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页 size-change 每页最大化 current-change 当前最大化 layout 功能组件-->
      <div style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 2, 5, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="详情" :visible.sync="editDialogVisible" width="50%"
               @close="editDialogClosed">
      <div class="shopSin">
        <el-descriptions :column="1" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              商品名称
            </template>
            {{ shopSign.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品描述
            </template>
            {{ shopSign.content }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品质量
            </template>
            <el-tag>{{ shopSign.lity.listType }}成新</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品原价
            </template>
            {{ shopSign.original }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品价钱
            </template>
            {{ shopSign.price }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品数量
            </template>
            {{ shopSign.shopNum }}个
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品购买数量
            </template>
            {{ shopSign.shopBuy }}个
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品浏览数
            </template>
            {{ shopSign.shopLook }}人数
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品状态
            </template>
            <el-tag type="danger" v-if="shopSign.shopSold == false">上架</el-tag>
            <el-tag type="warning" v-if="shopSign.shopSold == true">下架</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品图片
            </template>
            <el-image
              style="width: 80px; height: 80px;border: 1px dashed #d9d9d9;border-radius: 6px;margin-right: 5px"
              :src="item"
              fit="cover" v-for="(item,index) in list" :key="index" :preview-src-list="list"></el-image>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品上架时间
            </template>
            {{ shopSign.updateTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <el-dialog title="添加商品" :visible.sync="addDialogVisible" width="50%"
               @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="form"
               ref="addFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" filterable placeholder="请选择" @change="changeType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="描述" prop="content">
          <el-input type="textarea" v-model="form.content" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="原价" prop="email">
          <el-input v-model="form.original"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="shopNum">
          <el-input-number v-model="form.shopNum"></el-input-number>
        </el-form-item>
        <el-form-item label="品质" prop="quality">
          <el-select v-model="form.quality" filterable placeholder="请选择" @change="changeQuality">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" prop="userUrl">
          <el-upload
            action="http://localhost:9000/eduoss/imgFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
            :file-list="form.fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <!--       内容底部区域 -->
      <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sumbit">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="修改商品" :visible.sync="editDialogShow" width="50%"
               @close="editDialogShowClosed">
      <!-- 内容主体区域 -->
      <el-form :model="editForm"
               ref="addFormRef" label-width="70px">
        <!-- 用户名 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="类型" prop="type">
          <el-select v-model="editForm.type" filterable placeholder="请选择" @change="changeEditType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="描述" prop="content">
          <el-input type="textarea" v-model="editForm.content" rows="5"></el-input>
        </el-form-item>
        <el-form-item label="原价" prop="email">
          <el-input v-model="editForm.original"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="shopNum">
          <el-input-number v-model="editForm.shopNum"></el-input-number>
        </el-form-item>
        <el-form-item label="品质" prop="quality">
          <el-select v-model="editForm.quality" filterable placeholder="请选择" @change="changeEditQuality">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" prop="userUrl">
          <el-upload
            action="http://localhost:9000/eduoss/imgFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
            :file-list="editForm.fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <!--       内容底部区域 -->
      <span slot="footer" class="dialog-footer">
              <el-button @click="editDialogShow = false">取 消</el-button>
              <el-button type="primary" @click="editSumbit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'shopYList',
  data() {
    return {
      addDialogVisible: false,
      //查询信息实体
      queryInfo: {
        query: '',
        pageNum: 1, //当前页
        pageSize: 5, //每页最大数
        userId: ''
      },
      total: 0,
      shopList: [],
      editDialogVisible: false,
      shopSign: {
        lity: {
          listType: ''
        }
      },
      list: [],

      form: {
        title: '',
        type: '',
        typeCode: '',
        content: '',
        original: '',
        price: '',
        shopNum: 0,
        quality: '',
        qualityCode: '',
        fileList: []
      },
      options: [],
      options1: [
        {
          value: '1',
          label: '十'
        },
        {
          value: '2',
          label: '九'
        },
        {
          value: '3',
          label: '七'
        },
        {
          value: '4',
          label: '五'
        },
        {
          value: '5',
          label: '三'
        },
        {
          value: '6',
          label: '一'
        },
        {
          value: '10',
          label: '零'
        }
      ],
      addRules: [],
      picList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      editForm:{
        title: '',
        type: '',
        typeCode: '',
        content: '',
        original: '',
        price: '',
        shopNum: 0,
        quality: '',
        qualityCode: '',
      },
      editDialogShow: false,
      shopBuy: 0,
      shopState: false,
      id: 0,
    };
  },
  created() {
    this.getShopList();
    this.getTab();
  },
  methods: {
    //最大数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getShopList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getShopList();
    },
    async getShopList() {
      let that = this;
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      that.queryInfo.userId = user.id;
      const { data: res } = await this.$http.get('shop/getShopUser', { params: this.queryInfo });
      if (res.flag == '200') {
        let serve = res.shopList;
        var list = [];
        serve.forEach(item => {
          var list = [];
          if (item.shopUrl.indexOf('<<tupian>>') > 0) {
            item.shopUrl = item.shopUrl.split('<<tupian>>');
            item.shopUrl.forEach(item => {
              list.push(item);
            });
            this.$set(item, 'imageList', list);
          } else {
            list.push(item.shopUrl);
            this.$set(item, 'imageList', list);
          }
          item.creatTime = that.formatDateTime(item.creatTime);
        });
        this.shopList = serve;
        // console.log(res.data);
        this.total = res.number;  //总记录数
        // console.log(this.total);
      }
    },
    userStateChanged() {

    },
    async deleteUser(index, show) {
      let that = this;
      let data = {
        id: index,
        shopSold: show
      };
      let tile = '';
      if (show == true) {
        tile = '下架';
      }
      if (show == false) {
        tile = '上架';
      }
      const { data: res } = await this.$http.post('shop/updateShopSold', data);
      if (res.flag == '200') {
        this.$message.success(tile + '成功');
        that.getShopList();
      } else {
        this.$message.error(tile + '失败');
      }
    },
    async showEditDialog(id) {
      let that = this;
      const { data: res } = await this.$http.get('shop/getShopSign?id=' + id);
      if (res.flag == '200') {
        let serve = res.shopSing;
        that.list = [];
        serve.creatTime = this.formatDateTime(serve.creatTime);
        serve.updateTime = this.formatDateTime(serve.updateTime);
        if (serve.shopUrl.indexOf('<<tupian>>') > 0) {
          serve.shopUrl = serve.shopUrl.split('<<tupian>>');
          serve.shopUrl.forEach(item => {
            that.list.push(item);
          });
        } else {
          that.list.push(serve.shopUrl);
        }
        that.shopSign = serve;
        this.editDialogVisible = true;
      }
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();  //重置信息
    },
    handleAvatarSuccess1(res, file, fileList) {
      // this.imageUrlU = res.collectNum;
      // console.log(res,file,fileList)
      let that = this;
      let currentFile = [];
      fileList.forEach((item, index) => {
        if (item.response) {
          let obj = {
            url: item.response.collectNum
          };
          currentFile.push(obj);
        } else {
          let link = item.url;
          let obj = {
            url: link
          };
          currentFile.push(obj);
        }
      });
      this.picList = currentFile;
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    addDialogClosed() {
    },
    changeType(value) {
      this.form.typeCode = value;
    },
    changeQuality(value) {
      this.form.qualityCode = value;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isPng) {
        this.$message.error('上传图片只能是 JPG或png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
    handleRemove(file, fileList) {
      let that = this;
      if (fileList.length > 0) {
        var currentfileList = [];
        fileList.forEach((item, index) => {
          if (item.response) {
            let obj = {
              url: item.response.collectNum
            };
            currentfileList.push(obj);
          } else {
            let link = item.url;
            let obj = {
              url: link
            };
            currentfileList.push(obj);
          }
        });
        that.picList = currentfileList;
      } else {
        that.fileImage = [];
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /**
     * 清空上传组件
     */
    emptyUpload() {
      const mainImg = this.$refs.upload;
      if (mainImg) {
        if (mainImg.length) {
          mainImg.forEach(item => {
            item.clearFiles();
          });
        } else {
          this.$refs.upload.clearFiles();
        }
      }
    },
    async getTab() {
      const { data: res } = await this.$http.get('tab');
      if (res.flag == '200') {
        let serve = res.tab;
        serve.forEach((item, index) => {
          let obj = {
            value: item.id,
            label: item.title
          };
          this.options.push(obj);
        });
      }
    },
    async sumbit() {
      let that = this;
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      var file = [];
      that.picList.forEach((item, index) => {
        file.push(item.url);
      });
      let dataId = {
        title: that.form.title,
        shopType: that.form.typeCode,
        content: that.form.content,
        original: that.form.original,
        price: that.form.price,
        shopNum: that.form.shopNum,
        quality: that.form.qualityCode,
        shopUrl: file.join('<<tupian>>'),
        userId: user.id
      };
      const { data: res } = await this.$http.post('shop/addShop', dataId);
      if (res.flag == '200') {
        this.$message.success('添加成功');
        this.addDialogVisible = false
        that.getShopList();
      } else {
        this.$message.error('添加失败');
      }
    },
    editDialogShowClosed(){},
    async editDialog(id) {
      let that = this;
      const { data: res } = await this.$http.get('shop/getShopSign?id=' + id);
      if (res.flag == '200') {
        let serve = res.shopSing;
        that.editForm.fileList = []
        if (serve.shopUrl.indexOf('<<tupian>>') > 0) {
          serve.shopUrl = serve.shopUrl.split('<<tupian>>');
          serve.shopUrl.forEach((item,index) => {
            let obj = {
              uid: index,
              url: item
            }
            that.editForm.fileList.push(obj)
            let obj1 = {
              url: item
            }
            that.picList.push(obj1)
          });
        } else {
          let obj = {
            uid: 0,
            url: serve.shopUrl
          }
          that.editForm.fileList.push(obj)
          let obj1 = {
            url: serve.shopUrl
          }
          that.picList.push(obj1)
        }
        that.editForm.title = serve.title
        that.editForm.title = serve.title
        that.editForm.content = serve.content
        that.editForm.original = serve.original
        that.editForm.price = serve.price
        that.editForm.shopNum = serve.shopNum
        that.shopBuy = serve.shopBuy
        that.shopState = serve.shopState
        that.options1.forEach((item,index) => {
          if(item.value == serve.quality.toString()){
            that.editForm.quality = item.label
            that.editForm.qualityCode = item.value
          }
        })
        that.options.forEach((item,index) => {
          if(item.value == serve.shopType.toString()){
            that.editForm.type = item.label
            that.editForm.typeCode = item.value
          }
        })
        that.id = serve.id
        this.editDialogShow = true;
      }
    },
    async editSumbit(){
      let that = this
      let user = JSON.parse(window.sessionStorage.getItem('user') || null);
      var file = [];
      that.picList.forEach((item, index) => {
        file.push(item.url);
      });
      let dataId = {
        id: that.id,
        title: that.editForm.title,
        shopType: that.editForm.typeCode,
        content: that.editForm.content,
        original: that.editForm.original,
        price: that.editForm.price,
        shopNum: that.editForm.shopNum,
        quality: that.editForm.qualityCode,
        shopUrl: file.join("<<tupian>>"),
        userId: user.id,
        shopBuy: that.shopBuy,
        shopState: that.shopState
      }
      const { data: res } = await this.$http.post('shop/updateShop', dataId);
      if (res.flag == '200') {
        this.$message.success('修改成功');
        this.editDialogShow = false
        that.editForm.fileList = []
        that.picList = []
        that.getShopList();
      } else {
        this.$message.error('修改失败');
      }
    },
    changeEditType(value) {
      this.form.typeCode = value;
    },
    changeEditQuality(value) {
      this.form.qualityCode = value;
    },
  }
};
</script>

<style lang="less" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}


::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

::v-deep .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.contentToo{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
